<template>
	<view class="integral_container">
		<navigator url="/pages/goods/pages/search?type=integral" hover-class="none" class="bc_fff bob_1 box boc_grey"
			id="search-bar">
			<uni-search-bar radius="16" placeholder="输入商品分类、名称" readonly cancelButton="none">
			</uni-search-bar>
		</navigator>
		<view class="goods_img_wrap">
			<u-swiper :list="banners" height="320rpx" circular indicator @change="e => currentNum = e.current"
				:indicatorStyle="{'text-align': 'center', 'bottom': '60rpx'}" @click="handleClickSwiper">
			</u-swiper>
		</view>
		<view class="bc_fff">
			<u-tabs :list="tabsList" lineColor="#F08519" itemStyle="padding: 24rpx 37rpx;"
				inactiveStyle="color: #999999" lineWidth="66rpx" lineHeight="10rpx"
				@change="handleFirstCate($event, true)"></u-tabs>
			<scroll-view v-show="childList.length" :scroll-left="scrollLeft" :scroll-x="true" :enable-flex="true" class="mt_8 pb_7 fx height_24" @scroll="onLeftScroll">
				<view class="height_21 plr_8 lh_21 bo_1 fz_12 ml_12 ib fx_sh"
					style="border-radius: 200rpx;border-color: #0000001a;" :style="[childTypeStyle(index)]" v-for="(item,index) in childList"
					:key="index" @click.stop="handleCate(item, false, index)">{{item.typeName}}</view>
			</scroll-view>
		</view>
		<view class="list_wrap pr plr_16 ptb_4 fx fx_w jcb minh_100" v-if="dataList.length">
			<view class="ptb_2" v-for="item,index in dataList" :key="index">
				<GoodsCard :data="item" type="integral_card" goodsType="6" :toDetail="false"
					:integralType="data.goodsType" @click.native="handleGoodsDetail(item)" />
			</view>
		</view>
		<view class="pt_16" v-if="dataList.length">
			<u-loadmore :status="loadingStatus" />
		</view>
		<view class="pt_100" v-if="!loading&&!dataList.length">
			<Empty title="暂无商品" />
		</view>
		<u-back-top :scroll-top="scrollTop" bottom="208" right="36" :z-index="1000">
			<image class="width_48 height_48 box_shadow br50" :src="ossUrl+'/back_top.png'" mode="aspectFit">
			</image>
		</u-back-top>
	</view>
</template>

<script>
	import GoodsCard from '@/components/goods/GoodsCard.vue'
	import Empty from '@/components/Empty.vue'
	import dataMixin from '@/mixins/data.js'
	import bannerMixin from '@/mixins/banner.js'
	import api from '@/service/config/api'
	export default {
		mixins: [dataMixin, bannerMixin],
		components: {
			GoodsCard,
			Empty
		},
		data() {
			return {
				ossUrl: this.$ossUrl,
				currentNum: 0,
				currentChildNum: null,
				dataInfo: {
					banner: []
				},
				listUrl: '/goods/api/product/integraProductList',
				params: {
					userType: this.$store.state.userInfo.identityType || 1,
					orderBy: 0,
					appletType: this.$store.state.appType === this.$base.ADMIN_TYPE ? 0 : 1,
				},
				bannerId: 7, // banner位置
				tabsList: [],
				dataList: [],
				noHideLoading: false,
				typeList: [],
				childList: [],
				scrollLeft: 0,
				scrollTop: 0,
			}
		},
		computed: {
			childTypeStyle() {
				return index=>{
					if(index===this.currentChildNum) {
						return {
							'border-color': '#F08519',
							'color': '#F08519',
						}
					}
				}
			}
		},
		onLoad() {
			this.getData(true)
			this.getBannerData()
			this.getCateList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			getCateList() {
				api.get('/goods/api/product/getIntegralTypeList', {}, {}).then(res => {
					if (res.data && res.data.length) {
						this.typeList = res.data
						this.tabsList = [{
							name: '全部',
							id: 0
						}, ...res.data.map(item => ({
							...item,
							name: item.typeName
						}))]
					}
				})
			},
			onLeftScroll(e) {
				this.scrollLeft = e.detail.scrollLeft
			},
			handleFirstCate({
				id
			}, isParent = true, index) {
					this.$delete(this.params, 'productTypeId')
				if (id == 0) {
					this.$delete(this.params, 'productTypeOneId')
					this.childList = []
				} else {
					this.$set(this.params, 'productTypeOneId', id)
					if (isParent) {
						const parent = this.typeList.find(item => item.id == id)
						console.log(parent)
						if (parent.childList && parent.childList.length) {
							this.childList = parent.childList
						} else {
							this.childList = []
						}
					}
				}
				this.currentChildNum = index === undefined ? null : index
				this.scrollLeft = 0
				this.getData(true)
			},
			handleCate({
				id
			}, isParent = true, index) {
					this.$delete(this.params, 'productTypeOneId')
				if (id == 0) {
					this.$delete(this.params, 'productTypeId')
					this.childList = []
				} else {
					this.$set(this.params, 'productTypeId', id)
					if (isParent) {
						const parent = this.typeList.find(item => item.id == id)
						console.log(parent)
						if (parent.childList && parent.childList.length) {
							this.childList = parent.childList
						} else {
							this.childList = []
						}
					}
				}
				this.currentChildNum = index === undefined ? null : index
				this.scrollLeft = 0
				this.getData(true)
			},
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods/pages/detail?id=${item.id}&goodsType=6&integralType=${item.goodsType}`
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.group_container {
		.list_wrap {
			top: -32rpx;
			margin-top: -16rpx;
			border-radius: 24rpx 24rpx 0 0;
		}
	}
</style>